<template>
  <div class="about">
    <div class="site-content">
      <div class="content-warp">
        <div class="about-site about-info">
          <span>❤</span
          ><span v-if="searchWords"
            >搜索结果："<span style="color:red">{{ searchWords }}</span>" 相关文章共有<span style="color:aqua">{{this.total}}</span>条</span
          >
            
            <div class="info-card" v-for="item in searchList" :key="item.id" >
                <router-link :to="`/article/${item.id}`">
            <p v-if="!item.highlightFields.title" v-html="item.content.title" class="title"></p>
            <p v-if="item.highlightFields.title" v-html="item.highlightFields.title[0]" class="title"></p>
            <!-- <p v-if="item.highlightFields.description" v-html="item.highlightFields.description[0]"></p> -->
            <p v-if="item.highlightFields.content" class="content" v-html="item.highlightFields.content[0].replace(/#/g,'')"></p>
            <p v-if="!item.highlightFields.content" class="content">点进文章查看具体内容</p>
        </router-link>
          </div>
          <div style="text-align:center;color:gray;font-size:larger;" class="info-card" v-if="this.total===0">对不起,您搜索内容为空
            <br><br>点击回到<router-link to="/" style="color:blue">主页</router-link></div>

        </div>
      </div>
    </div>
  </div>
</template>
  <script>
import { search } from "../api";
export default {
  name: "SearchResult",
  data() {
    return {
    searchList: [],
      words: "",
      total:'',

      showDonate: false,
                comments: [],
                menus: [],
                note: "",
                markdownOption: {
                    readmodel: false, // 沉浸式阅读
                    navigation: false, // 导航目录
                },
                navigation: true,
                editable: false,
                subfield: false,
                defaultOpen: "preview",
                placeholder: "无内容",
                previewBackground: "white"
    };
  },
  computed: {
    searchWords() {
      return this.$route.params.words;
    },
  },
  components: {},
  methods: {
    search() {
      search(this.words)
        .then((res) => {
           this.searchList = res.rows || []
           this.total = res.total
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  mounted() {
    this.search();
  },
  created() {
    this.words = this.$route.params.words;
  },
};
</script>

  <style scoped lang="less">
.title{
    color:blue
}
.content{
    font-size: smaller;
    color:cadetblue;
}
.about {
  padding-top: 40px;
}

.content-warp {
  margin-top: 80px;

  .about-info {
    margin: 30px 0;

    span {
    //   color: red;
      margin-right: 10px;
    }

    .info-card {
        word-wrap: break-word; word-break: normal;
      min-height: 100px;
      padding: 20px;
      border-radius: 3px;
      margin: 30px 0 5px 0;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      p {
        line-height: 1.7rem;
      }
    }
  }
}

/*******/
@media (max-width: 800px) {
  .content-warp {
    margin-top: 0;
  }
}
</style>
  